<!--
    qHtml DnD Tester
    
    http://127.0.0.1:8100/qlibjs/webres/common/_test/qClient_DnD/qClient_DnD_tests.html
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <title>qBase Drag n Drop Tests</title>
    <script>
        imagePath='../../images/';
        wrroot='../../';
        scriptPath='';
        contextPath='';
        bIsDev=true;
        bDebug=true;
    </script>
    <script src='../../jquery_exp.js'></script> 
    <script src="../../qCore.js"></script>
    <script src="../../qBase.js"></script>
    <script src="../../qHtml.js"></script>
    <style>
    </style>
    <script>
        function bodyLoaded(){
            basicDnD_test()

//            positionTests()

            
        }
        function dumpDnDArgs(e,xyCur,xyTL,oDnDItem){
        	pc(
        		"\n           e = "+e
        	   +"\n       xyCur = "+(q$.dump(xyCur).replace(/\n/g, ", "))
        	   +"\n        xyTL = "+(q$.dump(xyTL).replace(/\n/g, ", "))
        	   +"\n oDnDItem.id = "+oDnDItem.id
        	)
        }
        function basicDnD_test(){
            var dnd=qDnD
            
            dnd.makeDraggable(
                 agetElem("_dnd_Move1")
                ,{ 
                    startHandler: function e_mapRouteMain_SendMailDD_start2(e,oDnDItem){
                    	pc("\n           e = "+e+"\n oDnDItem.id = "+oDnDItem.id)
                        return true
                    }
                   ,dragHandler: function e_mapRouteMain_SendMailDD_drag2(e,xyDrag,xyDragTL,oDnDItem){
                    	dumpDnDArgs(e,xyDrag,xyDragTL,oDnDItem)
                    }
                   ,dropHandler: function e_mapRouteMain_SendMailDD_drop2(e,xyDrop,xyDropTL,oDnDItem){
						dumpDnDArgs(e,xyDrop,xyDropTL,oDnDItem)
                    }
                    ,type: dnd.TYPE_MOVE
                }
            )
            
            dnd.makeDraggable(
                 agetElem("_dnd_Move2")
                ,{ 
                    startHandler: function e_mapRouteMain_SendMailDD_start2(e,oDnDItem){
                    	pc("\n           e = "+e+"\n oDnDItem.id = "+oDnDItem.id)
                        return true
                    }
                   ,dragHandler: function e_mapRouteMain_SendMailDD_drag2(e,xyDrag,xyDragTL,oDnDItem){
                    	dumpDnDArgs(e,xyDrag,xyDragTL,oDnDItem)
                    }
                   ,dropHandler: function e_mapRouteMain_SendMailDD_drop2(e,xyDrop,xyDropTL,oDnDItem){
						dumpDnDArgs(e,xyDrop,xyDropTL,oDnDItem)
                    }
                    ,type: dnd.TYPE_MOVE
                }
            )
            
            dnd.makeDraggable(
                 agetElem("_dnd_Std1")
                ,{ 
                    startHandler: function e_mapRouteMain_SendMailDD_start2(e,oDnDItem){
                    	pc("\n           e = "+e+"\n oDnDItem.id = "+oDnDItem.id)
                        return true
                    }
                   ,dragHandler: function e_mapRouteMain_SendMailDD_drag2(e,xyDrag,xyDragTL,oDnDItem){
                    	dumpDnDArgs(e,xyDrag,xyDragTL,oDnDItem)
                    }
                   ,dropHandler: function e_mapRouteMain_SendMailDD_drop2(e,xyDrop,xyDropTL,oDnDItem){
						dumpDnDArgs(e,xyDrop,xyDropTL,oDnDItem)
                        dropImage(xyDrop)
                    }
                    ,type: dnd.TYPE_STD
                }
            )
            
            dnd.makeDraggable(
                 agetElem("_dnd_Std2")
                ,{ 
                    startHandler: function e_mapRouteMain_SendMailDD_start2(e,oDnDItem){
                    	pc("\n           e = "+e+"\n oDnDItem.id = "+oDnDItem.id)
                        return true
                    }
                   ,dragHandler: function e_mapRouteMain_SendMailDD_drag2(e,xyDrag,xyDragTL,oDnDItem){
                    	dumpDnDArgs(e,xyDrag,xyDragTL,oDnDItem)
                    }
                   ,dropHandler: function e_mapRouteMain_SendMailDD_drop2(e,xyDrop,xyDropTL,oDnDItem){
						dumpDnDArgs(e,xyDrop,xyDropTL,oDnDItem)
                        dropImage(xyDrop)
                    }
                    ,type: dnd.TYPE_STD
                }
            )
            
        }
        
        function positionTests(){
            o = agetElem("_dnd_Move1")
            assignEventListener(o,"click",function click_test(e){
                xy = getElemPosition(o)
                xyMC =  getMouseCoords(e)
                xyMO =  _qclient.dnd.getMouseOffset(o,e)
                pc(
                    "\n o    = "+o.id
                   +"\n xy   = "+q$.dump(xy).replace(/\n/g, ", ")
                   +"\n xyMC = "+q$.dump(xyMC).replace(/\n/g, ", ")
                   +"\n xyMO = "+q$.dump(xyMO).replace(/\n/g, ", ")
                )
            })
        }
        
        
        function dropImage(xy){
            var o,os
            $(o = document.createElement("img"))
            	.attr({src: "google_local.gif"})
            	.css({top: xy.y, left: xy.x, position: "absolute"})
//            os=o.style
//            os.top=xy.y
//            os.left=xy.x
//            os.position="absolute"
            _d.body.appendChild(o);  
        }
        
        
        
//        MyClient = QClient.extend({
//             className :"MyClient"
//            ,base_constr : function myclient_base_constr(){
//        //      pc(">>")
//                var t=this
//                try {
//                    t.base({instance:t, name:"MyClient", qcName:"_bcnp"})
//                }catch(exc){qErr(t.className+" Base Constructor Failed: ",exc)}
//        //      pc("<<")
//            }   
//            ,constructor: function MyClient() {this.base_constr()}
//        });/* Create Client */new MyClient(); 

        
        
        
    </script>
</head>

<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    
    <div style='position: absolute; top: 30px; left: 100px'>
        <div><i>Drag n Drop: Move</i></div>
        <div id='_dnd_dspar1' style='position: absolute'>
            <div id="_dnd_Move1" style="position: relative; z-index: 9999999; cursor: move; position: absolute; left: 0px; top:20px">
                 <img style="" title="Drag image to xxx to yyy" class="opaque_80" src="google_local.gif" height="18" width="22">
            </div>
            <div id="_dnd_Move2" style="position: relative; z-index: 9999999; cursor: move; position: absolute; left: 30px">
                 <img style="" title="Drag image to xxx to yyy" class="opaque_80" src="google_local.gif" height="18" width="22">
            </div>
        </div>
    </div>
    
    <div style=''>
        <div><i>Drag n Drop: Standard</i></div>
        <table>
            <tr>
                <td width=25px>
                    <div id="_dnd_Std1" style="position: relative; z-index: 9999999; cursor: move;">
                         <img style="" title="Drag image to xxx to yyy" class="opaque_80" src="google_local.gif" height="18" width="22">
                    </div>
                    &nbsp;
                </td><td width=25px>
                    <div id="_dnd_Std2" style="position: relative; z-index: 9999999; cursor: move;">
                         <img style="" title="Drag image to xxx to yyy" class="opaque_80" src="google_local.gif" height="18" width="22">
                    </div>
                    &nbsp;
                </td>
            </tr>
        </div>
    </div>
    
    
	<script>
        bConsole=true; __qcOpts={cb:true, t:0, w: 600, h: 500}
	    _SCR_START=" bodyLoaded();"; function __start() {try{if(bConsole){startCons(__qcOpts); _w.consoleLoaded = function consoleLoaded(){ setTimeout(_SCR_START,50) }}else{eval(_SCR_START)}}catch(e){debugErr(e)}};__start()
    </script>
</body>
</html>